<script lang="ts" setup>
// <!-- 指定脚本语言为 Typescript -->
import { ref } from 'vue';
// 普通变量直接赋值
// let counts = 0
// 响应式变量,创建变量的同时指定变量的类型为 number
let counts = ref<number>(0)

setInterval(
    () => {
        // counts = counts + 1
        // console.log("counts: " + counts);
        // 在脚本语言中访问响应式变量，需要使用 变量名.value 的形式
        counts.value = counts.value + 1
        console.log("counts: " + counts.value);
    },
    1000
)
</script>

<template>
    <!-- 在 HTML 中访问响应式变量,直接使用变量名称即可. -->
    <h1>当前的计数值：{{ counts }}</h1>
</template>

<style scoped></style>